<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{site.description}}">
    <meta name="keywords" content="{{site.keywords}}" />
    <meta property="og:title" content="{{site.title}}" />
    <meta property="og:description" content="{{site.description}}" />
    <title>{{site.title}}-{{site.name}}</title>
    {{include './common/css.html'}}
</head>

<body>

    {{include './common/header.html'}}

    <!-- 页面内容 -->
    <div class="mt-16 py-12">
        <div class="container mx-auto px-4">
            <!-- 面包屑导航 -->
            <div class="mb-8">
                <nav class="flex" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="/" class="text-gray-700 hover:text-blue-600">
                                <i class="fas fa-home mr-2"></i>首页
                            </a>
                        </li>
                        {{each position}}

                        <li>
                            <div class="flex items-center">
                                <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                                <a href="{{$value.path}}/index.html"
                                    class="text-gray-700 hover:text-blue-600">{{$value.name}}</a>
                            </div>
                        </li>

                        {{/each}}


                    </ol>
                </nav>
            </div>

            <!-- 产品详情 -->
            <div class="grid grid-cols-1  {{if article?.field?.productionImg?.length > 0}} md:grid-cols-2{{/if}} gap-12">
                <!-- 产品图片 -->
                {{if article?.field?.productionImg?.length > 0}}
                <div>
                    <div class="bg-white p-4 rounded-lg shadow-md">
                        <img src="{{article?.field?.productionImg[0].url}}" alt="{{article.title}}" class="w-full h-auto rounded">
                    </div>
                    <div class="grid grid-cols-4 gap-4 mt-4" id="thumbnail-container">
                        {{each article?.field?.productionImg}}
                        <div class="bg-white p-2 rounded cursor-pointer"
                            onclick="changeMainImage('{{$value.url}}', this)">
                            <img src="{{$value.url}}" alt="{{article.title}}" class="w-full h-auto rounded">
                        </div>
                        {{/each}}
                    </div>
                </div>
            {{/if}}
                <!-- 产品信息 -->
                <div>
                    <h1 class="text-3xl font-bold mb-4">{{article.title}}</h1>
                    <div class="mb-6">
                        <span class="text-gray-500">产品编号: </span>
                        <span>{{article.field?.productNo || ''}}</span> 
                    </div>
                    <div class="border-t border-b border-gray-200 py-6 mb-6">
                        <p class="text-lg text-gray-700 mb-4">
                            {{@ article.description || ''}}
                        </p>
                    </div>
                    <div class="mb-6">
                        <a href="/contact/page.html" class="btn-primary inline-block">立即咨询</a>
                    </div>
                </div>
            </div>

            <!-- 产品详细信息标签页 -->
            <div class="mt-12">
                <div class="border-b border-gray-200">
                    <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                        <button class="tab-button border-b-2 border-blue-500 py-4 px-1 text-blue-600 font-medium"
                            data-tab="specs">
                            产品详情
                        </button>

                    </nav>
                </div>

                <!-- 规格参数 -->
                <div class="tab-content py-8 active article">
                    {{@ article.content}}
                </div>
            </div>

            <!-- 相关产品 -->
            <div class="mt-16">
                <h2 class="text-2xl font-bold mb-8">相关产品</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    {{each hot}}
                   
                    <a href="{{$value.path}}/article-{{$value.id}}.html"" class="card block">
                        <img src="{{$value.img}}" class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h3 class="text-lg font-semibold mb-2">{{$value.title}}</h3>
                            <p class="text-gray-600">{{$value.description}}</p>
                        </div>
                    </a>
                    {{/each}}
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    {{include './common/footer.html'}}
    {{include './common/js.html'}}
    <script>

        window.addEventListener('load', function() {
    // 假设缩略图和主图已经加载完成
    const firstThumbnail = document.querySelector('#thumbnail-container > div');
    if (firstThumbnail) {
        // 获取第一个缩略图的src属性值
        const firstThumbnailImg = firstThumbnail.querySelector('img');
        let mainImageSrc = '';
        if (firstThumbnailImg && firstThumbnailImg.src) {
            mainImageSrc = firstThumbnailImg.src;
        } else if (firstThumbnailImg && firstThumbnailImg.dataset.src) {
            // 如果使用了懒加载等技术，请确保正确获取图片地址
            mainImageSrc = firstThumbnailImg.dataset.src;
        }

        // 切换主图到第一个缩略图对应的图片
        if (mainImageSrc) {
            document.querySelector('.bg-white.p-4.rounded-lg.shadow-md img').src = mainImageSrc;
        }

        // 调用changeMainImage函数以应用样式和更改主图
        changeMainImage(mainImageSrc, firstThumbnail);
    }
});

function changeMainImage(src, element) {
    // 切换主图
    document.querySelector('.bg-white.p-4.rounded-lg.shadow-md img').src = src;

    // 移除所有缩略图的边框
    const thumbnails = document.querySelectorAll('#thumbnail-container > div');
    thumbnails.forEach(thumb => {
        thumb.classList.remove('border-1', 'border-blue-500');
    });

    // 为当前点击（或指定）的缩略图添加边框
    element.classList.add('border-2', 'border-blue-500');
}
    </script>
</body>

</html>